document.write(`
    <style>
    .pager {
        text-align: center;
        display: inline-block;
        min-width: 20px;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
`);

Vue.component("el-pagination", {
    props: ["background", "page-size", "current-page", "layout", "total","page-sizes"],
    template: `
            <div>
                <select v-if="pageSizes != undefined"
                        v-model="selectSize" @change="pageSize = selectSize">
                        <option v-for="size in pageSizes" :value="size">每页{{size}}行</option>
                </select>
                <template v-for="l in layouts">
                      <span v-if="l == 'first'" class="pager" style="background-color: #eee"
                              @click="curPage += (curPage == 1 ? 0 : -1); $emit('page-change',curPage)">上一页</span>
                      <span v-if="l == 'pager'" class="pager" v-for="p in pages"  :style="getStyle(p)"
                              @click="curPage = p;$emit('page-change',curPage) ">{{p}}</span>
                      <span v-if="l == 'next'" class="pager" :style="getStyle(0)"
                              @click="curPage += (curPage == pages ? 0 : 1);$emit('page-change',curPage)">下一页</span>
                      <span v-if="l == 'last'" class="pager" style="background-color: #eee">最后一页</span>
                </template>
            </div>
           `,
    data() {
        return {
            curPage: 1,
            layouts: [],
            selectSize :0
        };
    },
    created() {
        this.curPage = parseInt(this.currentPage);
        //字符串切割数组
        this.layouts = this.layout.split(/\W+/);
        this.selectSize = this.pageSize;
    },
    computed: {
        //总页数
        pages() {
            let all = this.total / this.pageSize;
            all = Math.floor(all);//取整
            if (this.total % this.pageSize != 0) {
                all++;
            }
            return all;
        }
    },
    methods: {
        getStyle(p) {
            let ret = {backgroundColor: null};
            if (this.background != undefined) {
                ret.backgroundColor = "#eee";
            }
            if (p == this.curPage) {
                ret.backgroundColor = "#aaa";
            }
            return ret;
        }
    }

})